/**
 * @description 根据id获取DOM对象
 * @author dongling.li
 * @date 2021-04-22
 * @param {string} id 对应标签的id
 */
 function myGetById(id) {
    if (!id) {
        return null;
    }
    let dom = document.getElementById(id);
    return dom;
}

/**
 * @description 注册事件
 * @author dongling.li
 * @date 2021-04-22
 * @param {object} target 事件源
 * @param {string} event 事件类型
 * @param {function} fn 事件内容（方法）
 */
function registerEvent(target, event, fn) {
    if (target.addEventListener) {
        target.addEventListener('on' + event, fn);
    } else if (target.attachEvent) {
        target.attachEvent(event, fn);
    } else {
        target['on' + event] = fn;
    }
}
/**
 * @description 点击按钮随机选中默认选项
 * @author dongling.li
 * @date 2021-04-22
 */
function onSelectOption() {
    let btn = myGetById('quickBtn');
    let food = myGetById('food');
    let len = food.children.length;

    btn.onclick = function () {
        let n = Math.floor(Math.random() * len);
        food.children[n].selected = true;
    }
}

onSelectOption();

/**
 * @description 监听输入框
 * @author dongling.li
 * @date 2021-04-22
 */
function listenerInput() {
    let inputNode = myGetById('text');
    // 监听获取焦点
    inputNode.onfocus = function () {
        let value = inputNode.value;
        if (!value) {
            inputNode.placeholder = '';
            inputNode.style.color = 'black';
        }
    }
    // 监听失去焦点
    inputNode.onblur = function () {
        let value = inputNode.value;
        if (!value) {
            inputNode.placeholder = '请输入搜索关键字';
            inputNode.style.color = 'grey';
        }
    }
}
listenerInput();

/**
 * @description 选择文本输入框
 * @author dongling.li
 * @date 2021-04-22
 */
function onSelectInput() {
    let inputParent = myGetById('input_p');
    let inputArr = inputParent.children;
    for (let i = 0, len = inputArr.length; i < len; i++) {
        let node = inputArr[i];
        node.onfocus = function () {
            for (let j = 0, len = inputArr; j < len; j++) {
                inputArr[j].className = 'normal_input';
            }
            node.className = 'current_input';
        }

        node.onblur = function () {
            node.className = 'normal_input';
        }
    }
}
onSelectInput();

/**
 * @description 创建列表
 * @author dongling.li
 * @date 2021-04-22
 * @returns {*} 
 */
function createList() {
    let text = myGetById('input_value');
    let ul = myGetById('box');

    let value = text.value;
    if (!value) {
        return alert('请输入有效内容');
    }
    // 创建li标签元素
    let li = document.createElement('li');
    // 创建input标签按钮，作为删除按钮
    let del = document.createElement('input');
    del.type = 'button';
    del.value = '删除';
    del.className = 'btn';
    li.innerText = value;
    // 将删除按钮添加到li中
    li.appendChild(del);
    del.onclick = function () {
        ul.removeChild(li);
    }
    ul.appendChild(li);
    // let htmlStr = `<li>${value}</li>`
    // ul.innerHTML = ul.innerHTML + htmlStr;
    text.value = '';
}

/**
 * @description 添加按钮点击事件
 * @author dongling.li
 * @date 2021-04-22
 */
function addCreateButtonEvent() {
    let btnCreate = myGetById('create_li');
    btnCreate.addEventListener('click', createList);
}
addCreateButtonEvent();

function playMove() {
    var timer = null;
    let move = document.getElementById('move');
    move.onmouseover = function () {
        // 新的定时器开始之前，先清除旧的定时器，可以避免出现多次点击导致的旧定时器无法清除的问题
        clearTimer(timer);
        timer = setInterval(() => {
            //TODO
        }, 1000);
    }

    move.onmouseout = function () {
        clearTimer(timer);
    }
}

function clearTimer(timer) {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
}